<template>
  <div class="chart-content-wrapper" @mouseenter="mouseenter()" @mouseleave="mouseleave">
    <top-filter :title="reportName" ref="topFilter" :isShowHelp="false" :helpContent="'医保大数据平台'">
      <double-check-filter :isParentLinkChild="true" @confirmDoubleSelect="planAreaSelect" defaultText="统筹区"
                           :filter="filterN" type="planArea"></double-check-filter>
    </top-filter>
    <div class="chart-container" v-show="isShowChart">
      <div id="old-in-raising-id" class="chart-type1"></div>
      <Summarize :showSummarizeText="conclusion"></Summarize>
    </div>
  </div>
</template>

<script>
  import {setChartHeight, loadingOpt, isJanuary} from '../../../assets/js/utils.js'
  import SingleListFilter from '../../last/filter/single-list-filter.vue'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import TopFilter from '../../last/filter/top-filter1.vue'
  import Summarize from '../../last/summarize/summarize.vue'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox'
  import {getOldInsuranceRaisingAnalyse} from "../../../api/last-api";

  export default {
    name: 'chart5',
    props: ['isChange', 'filter'],
    data () {
      return {
        filterN: JSON.parse(JSON.stringify(this.filter)),
        conclusion: '',
        reportName: '养老保险抚养比分析',
        areaCode: '',
        medicalCategory: '',
        hospLevel: this.filter.nc.hospitalRankType[1].selectId,
        isShowChart: true,
        height: 400
      }
    },
    components: {
      SingleListFilter,
      DoubleCheckFilter,
      TopFilter,
      Summarize,
      SingleListFilterWithoutCb
    },
    mounted(){
      let areaCode = []
      let areaCodeText = []
      this.filter.nc.planArea.map((item, index) => {
        if (index > 0 && index <= 6) {
          areaCode.push(item.selectId)
          areaCodeText.push(item.selectName)
        }
      })
      this.areaCode = areaCode.join(',');
      this.areaCodeText = areaCodeText.join('、')
      setChartHeight();
      this.myChart = this.$echarts.init(document.getElementById('old-in-raising-id'), null, {renderer: 'canvas'})
      this.getData();
      let that = this;
//      this.myChart.on('legendselectchanged', function (params) {
//        let option = this.getOption();
//        let select_key = Object.keys(params.selected);
//        if (!params.selected[params.name]) {
//          select_key.map(res => {
//            option.legend[0].selected[res] = true;
//          });
//        } else {
//          select_key.map(res => {
//            option.legend[0].selected[res] = true;
//          });
//          option.legend[0].selected[params.name] = true;
//        }
//        let legend = []
//        that.myChart.dispatchAction({
//          type: 'legendselectchanged',
//          batch: legend
//        });
//        that.myChart.setOption(option)
//      })
      // 点击黑块的事件
      this.myChart.getZr().on('click', params => {

        // 获取点击的点
        var pointInPixel = [params.offsetX, params.offsetY];
        // 判断点击的点是否在 gridId为 'two' 中
        if (this.myChart.containPixel({gridId: 'three'}, pointInPixel)) {

          var xIndex = this.myChart.convertFromPixel({seriesIndex: 0},
            [params.offsetX, params.offsetY])[0];

          let paramsQuery = {};
          let hash = window.location.hash;
          paramsQuery.hash = hash.slice(1,hash.length);
          paramsQuery.areaCode = this.areaCode;
          paramsQuery.queryYear = this.json.yearList[xIndex]
          paramsQuery.areaCodeText = this.areaCodeText
          let data = JSON.stringify(paramsQuery)
          this.$router.push({path: `/decision/detail/old-raising-analyse-detail?data=${data}`})
        }
        if (params.componentSubType === 'bar') {
        }
      });
    },
    watch: {
      isChange(){
        setTimeout(() => {
          this.myChart.resize();
        }, 111)
      }
    },
    methods: {
      mouseenter(){
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave() {
        this.$refs.topFilter._showChartTitle()
      },
      planAreaSelect(filter, chooseListName){
        //统筹区
        this.areaCodeText = chooseListName.join('、')
        this.areaCode = filter.join(',');
        this.getData();
      },
      hospLevelSelect(filter){
        //医院级别
        this.hospLevel = filter.join(',');
        this.getData();
      },
      confirmSingleSelect(filter){
        //医疗类别
        this.medicalCategory = filter;
        this.getData();
      },
      getData(){
        if (this.myChart) {
          this.myChart.clear();
          this.myChart.showLoading(loadingOpt)
        }
        getOldInsuranceRaisingAnalyse(this.areaCode).then(response => {
          this.json = response.data;
          if (response.code == 0) {
            this.isShowChart = true;
            this.myChart.hideLoading();
            this.reportName = this.json.reportName;
            this.conclusion = this.json.reportConclusion;
            this.drawLine(this.json)
          } else {
            this.isShowChart = false;
          }
        }).catch(res => {
          console.log(res)
          /*this.isShowChart = false;*/
        })
      },
      drawLine(json){
        // 测试数据
//        json.yearlyGrowthRateList1 = json.yearlyGrowthRateList.map((value) => {
//          return (value - 8).toFixed(2)
//        })
//        json.yearlyGrowthRateList2 = json.yearlyGrowthRateList.map((value) => {
//          return (value + 8).toFixed(2)
//        })
//        json.positiveIncreaseQuotaList = json.positiveIncreaseQuotaList.map((value) => {
//          return value + 20
//        })


        // 格式化负增长数据，为0时设为空
//        json.negativeIncreaseQuotaList.map((item, index) => {
//          if (item == 0) {
//            json.negativeIncreaseQuotaList[index] = ''
//          }
//        })
        // 基于准备好的dom，初始化echarts实例
        // 绘制图表
        let boundaryNum = isJanuary();
        this.myChart.setOption({
          title: {
            show: false,
            subtext: '单位 : %',
            left: '82%',
            top: '26%',
            x: 'left',
            subtextStyle: {
              color: '#fff'
            }
          },
          // Make gradient line here
          // Make gradient line here
          grid: [//此参数可在一个dom中划分多个图表 可设置不同图表的位置
            {
              height: '14%',
              top: '10%',
              tooltip: {
                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
              }
            },
            {
              height: '53%',
              top: '35%',
              tooltip: {
                show: false,

              }
            },
            {
              height: '53%',
              top: '35%',
              id: 'three',
              tooltip: {
                show: true,
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                },
              }
            }
          ],
          legend: [
            {
              top: '0',
              left: 'center',
              itemWidth: 8,
              itemHeight: 10,
              itemGap: 20,
//              selectedMode: false,
              data: [
                {name: '在职参保人员增长率', icon: 'circle'},
                {name: '退休人员增长率', icon: 'circle'}
              ],
              textStyle: {
                color: '#fff'
              },

            },
            {
              top: '95%',
              left: 'center',
              itemWidth: 8,
              itemHeight: 10,
              itemGap: 20,
              selectedMode: false,
              data: [
                {name: '在职参保人数', icon: 'rect'},
                {name: '退休人数', icon: 'rect'},
                {name: '养老保险抚养比', icon: 'circle'},
                /**'抚养比参考值'**/
              ],
              textStyle: {
                color: '#fff'
              },

            }
          ],
          tooltip: {
            show: true,
            textStyle: {
              fontSize: 12
            },
            formatter: function (params) {
              let dataIndex = params[0].dataIndex;
//              console.log(JSON.stringify(json))
//              console.log(dataIndex)
              return `<span style="color: #fff">养老保险抚养比</span></br>
                      <span style="color: #fff">年份: ${json.yearList[dataIndex]}</span></br>
                      <span style="color: #fff">在职参保人数: ${json.workCountList[dataIndex]}万人</span></br>
                      <span style="color: #fff">退休人数: ${json.retireCountList[dataIndex]}万人</span></br>
                      <span style="color: #fff">抚养比: ${json.raiseList[dataIndex]}</span></br>
                      <span style="color: #67ffdb;
                            text-align: center;
                            line-height: 30px;height: 30px">单击查看月度详情</span>`;
            }
          },
          xAxis: [
            {
              data: json.yearList,
              show: true,
              axisLine: {
                show: true,//显示x轴坐标线并设置为虚线
                lineStyle: {
                  color: '#294363'
                }
              },
              axisTick: {
                show: false //不显示x轴坐标的刻度
              },
              axisLabel: {
                show: false //不显示x轴坐标数值
              }
            },
            {
              data: json.yearList,
              gridIndex: 1,
              show: true,
              axisLine: {
                show: false,//显示x轴坐标线并设置为虚线
                lineStyle: {
                  color: '#294363'
                }
              },
              axisTick: {
                show: false //不显示x轴坐标的刻度
              },
              axisLabel: {
                show: false //不显示x轴坐标数值
              }
            },
            {
              data: json.yearList,
              gridIndex: 2,
              axisLine: { //x轴的横线是否显示
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisTick: { //x轴的刻度短竖线是否显示
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
            }
          ],
          yAxis: [
            {
              splitLine: {
                show: false
              },
              position: 'right',
              /* minInterval:5,*/
              /*max:'dataMax',*/
              splitNumber: 3,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
            },
            {
              name: '抚养比',
              nameTextStyle: {
                color: '#fff'
              },
              splitLine: {
                show: false
              },
              position: 'right',
              gridIndex: 1,
              /* minInterval:5,*/
              /*max:'dataMax',*/
//              splitNumber: 3,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
            },
            {
              name: '人数(万人)',
              nameTextStyle: {
                color: '#fff'
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565',
                  type: 'dashed'
                }
              },
              gridIndex: 2,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#2a4565'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff'
                }
              },
            }
          ],
          // visualMap此处用于折线的分部分显示
//          visualMap: [
//            {
//              show: true,
//              dimension: 0,
//              seriesIndex: 0,
//              left: 'center',
//              top: 'top',
//              itemWidth: 10,
//              itemHeight: 10,
//              orient: "horizontal",
//              textStyle: {
//                color: '#fff'
//              },
//              pieces: [
//                {
//                  lte: boundaryNum.preStart,
//                  color: '#129cff',
//                  symbol: 'circle',
//                  label: '退休人员增长率',
//                },
//                {
//                  gt: 7,
//                  lte: 8,
//                  symbol: 'circle',
//                  color: '#67ffdb',
//                  label: '在职参保人员增长率'
//                }
//              ],
//            }
//          ],
          series: [
            {
              type: 'line',
              name: '在职参保人员增长率',
              color: '#1486DA',
              showSymbol: true,
              symbol: 'circle',
              data: json.workAddList,
              symbolSize: 10,
              xAxisIndex: 0,
              yAxisIndex: 0,
              tooltip: {
                show: true,
                formatter: function (params) {
//                  console.log(params)
                  return `<span style="color:#c7c7c7">${params.seriesName}</span></br>
                          <span style="color:#c7c7c7">年份：${params.name}</span></br>
                           <span style='color:#c7c7c7'>增长率：${params.value}%</span>`
                }
              },
              label: {
                show: false,
                position: 'top',
                formatter: '{c}%',
                color: '#fff'
              },
//              markLine: {
//                label: {
//                  position: 'start',
//                  /*formatter: '平均增长\n率{c}%',*/
//                  formatter: '{c}%',
//                  color: '#fff',
//                },
//                symbol: 'none',//设置平均线的没样式
//                data: [
//                  {
//                    type: 'average',
//                    name: '平均增长率',
//                    tooltip: {
//                      show: true,
//                      formatter(params){
//                        return `<span style="color:${params.color}">平均增长率</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                      }
//                    }
//                  }
//                ],
//                lineStyle: {
//                  color: '#ff6a93'
//                }
//              }
            },
            {
              type: 'line',
              name: '退休人员增长率',
              color: '#60EBCD',
              showSymbol: true,
              symbol: 'circle',
              data: json.retireAddList,
              symbolSize: 10,
              xAxisIndex: 0,
              yAxisIndex: 0,
              tooltip: {
                show: true,
                formatter: function (params) {
                  //                  console.log(params)
                  return `<span style="color:#c7c7c7">${params.seriesName}</span></br>
                          <span style="color:#c7c7c7">年份：${params.name}</span></br>
                           <span style='color:#c7c7c7'>增长率：${params.value}%</span>`
                }
              },
              label: {
                show: false,
                position: 'top',
                formatter: '{c}%',
                color: '#fff'
              },
//              markLine: {
//                label: {
//                  position: 'start',
//                  /*formatter: '平均增长\n率{c}%',*/
//                  formatter: '{c}%',
//                  color: '#fff',
//                },
//                symbol: 'none',//设置平均线的没样式
//                data: [
//                  {
//                    type: 'average',
//                    name: '平均增长率',
//                    tooltip: {
//                      show: true,
//                      formatter(params){
//                        return `<span style="color:${params.color}">平均增长率</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                      }
//                    }
//                  }
//                ],
//                lineStyle: {
//                  color: '#ff6a93'
//                }
//              }
            },
            {
              type: 'line',
              name: '养老保险抚养比',
              color: '#D48164',
              showSymbol: true,
              symbol: 'circle',
              data: json.raiseList,
              symbolSize: 10,
              xAxisIndex: 1,
              yAxisIndex: 1,
              tooltip: {
                show: false,
                formatter: function (params) {
                  return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
                }
              },
              label: {
                show: false,
                position: 'top',
                formatter: '{c}%',
                color: '#fff'
              },
//              markLine: {
//                label: {
//                  position: 'start',
//                  /*formatter: '平均增长\n率{c}%',*/
//                  formatter: '{c}%',
//                  color: '#fff',
//                },
//                symbol: 'none',//设置平均线的没样式
//                data: [
//                  {
//                    type: 'average',
//                    name: '平均增长率',
//                    tooltip: {
//                      show: true,
//                      formatter(params){
//                        return `<span style="color:${params.color}">平均增长率</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                      }
//                    }
//                  }
//                ],
//                lineStyle: {
//                  color: '#ff6a93'
//                }
//              }
            },
            {
              type: 'line',
              name: '抚养比参考值',
              showSymbol: true,
              symbol: 'circle',
              data: json.yearlyGrowthRateList1,
              symbolSize: 10,
              xAxisIndex: 1,
              yAxisIndex: 1,
              tooltip: {
                show: true,
                formatter: function (params) {
                  return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
                }
              },
              label: {
                show: false,
                position: 'top',
                formatter: '{c}%',
                color: '#fff'
              },
//              markLine: {
//                label: {
//                  position: 'start',
//                  /*formatter: '平均增长\n率{c}%',*/
//                  formatter: '{c}%',
//                  color: '#fff',
//                },
//                symbol: 'none',//设置平均线的没样式
//                data: [
//                  {
//                    type: 'average',
//                    name: '平均增长率',
//                    tooltip: {
//                      show: true,
//                      formatter(params){
//                        return `<span style="color:${params.color}">平均增长率</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                      }
//                    }
//                  }
//                ],
//                lineStyle: {
//                  color: '#ff6a93'
//                }
//              }
            },
            {
              type: 'bar',
              showSymbol: false,
              name: '在职参保人数',
              stack: 'one',
              data: json.workCountList,
              color: '#ff6a93',
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                }
//              },
              barWidth: '30%',
              barGap: '50%',
              xAxisIndex: 2,
              yAxisIndex: 2,
            },
            {
              type: 'bar',
              name: '退休人数',//此值与legend图例对应
              showSymbol: false,
              stack: 'two',
              color: '#ffd66a',
//              tooltip: {
//                show: true,
//                formatter: function (params) {
//                  return `<span style="color:${params.color}">${params.name}</span></br><span style='color:#c7c7c7'>${params.value}%</span>`
//                }
//              },
              data: json.retireCountList,
              label: {
                show: false,
                color: '#fff',
                position: 'top',
                formatter: function (params) {
                  let val = ''
                  let arr = json.yearlyPersonalPayRateList;
                  arr.map((item, index) => {
                    if (params.dataIndex == index) {
                      if (Math.round((arr[index] + params.value) * 100) % 10 == 0) {
                        val = (arr[index] + params.value).toFixed(1)
                      } else if (Math.round((arr[index] + params.value) * 100) % 100 == 0) {
                        val = (arr[index] + params.value).toFixed(0)
                      } else {
                        val = (arr[index] + params.value).toFixed(2)
                      }
                    }
                  })
                  return val + '%';
                }
              },
              barWidth: '30%',
              barGap: '10%',
              xAxisIndex: 2,
              yAxisIndex: 2
            }]
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
